<style scoped>
.cc {
  color: red;
}

</style>
<template>
  <Card>
    <div>
      <Table border :columns="columns7" :data="data6"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="40" size="small" show-elevator show-sizer></Page>
      </Row>
    </div>
  </Card>
</template>
<script>
export default {
  data: function () {
    return {
      columns7: [{
        title: '类型',
        key: 'type',
        align: 'center'
        /* ,
                  render: (h, params) => {
                    return h('div', [
                      h('Icon', {
                        props: {
                          type: 'person'
                        }
                      }),
                      h('strong', params.row.type)
                    ])
                  } */
      }, {
        title: '型号',
        key: 'model',
        align: 'center'
      }, {
        title: '品牌',
        key: 'brand',
        align: 'center'
      }, {
        title: '读取频率',
        key: 'frequency',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.show(params.index)
                }
              }
            }, '编辑'),
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click: () => {
                  let self = this
                  let config = {
                    title: '提示',
                    content: '您确定删除吗？',
                    onOk: function () {
                      self.remove(params.index)
                    }
                  }
                  this.$Modal.confirm(config)
                }
              }
            }, '删除')
          ])
        }
      }],
      data6: [{
        type: '电表1',
        model: 18,
        brand: '华为',
        frequency: 112
      }, {
        type: '电表2',
        model: 24,
        brand: '中兴',
        frequency: 112
      }, {
        type: '电表3',
        model: 30,
        brand: '西门子',
        frequency: 112
      }, {
        type: '电表4',
        model: 26,
        brand: '海信',
        frequency: 112
      }]
    }
  },
  methods: {
    show: function (index) {
      this.$Modal.info({
        title: '信息',
        content: `类型：${this.data6[index].type}<br>品牌：${this.data6[index].brand}<br>频率：${this.data6[index].frequency}`
      })
    },
    remove: function (index) {
      this.data6.splice(index, 1)
    }
  }
}

</script>
